.toast {
  min-width: 100px;
  height: 34px;

  font-size: 14px;
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 0 14px;
  animation: toastAnimation 0.2s;
  transition: top 0.3s, opacity 0.1s;
  @apply fcr-text-white fcr-cursor-pointer fcr-flex fcr-items-center fcr-justify-center fcr-box-border fcr-relative;
}

@keyframes toastAnimation {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.toast svg {
  margin-right: 6px;
  width: 21px;
  height: 21px;
}

.toast-success {
  @apply fcr-bg-safe fcr-border-safe fcr-border;
}

.toast-error {
  @apply fcr-bg-error fcr-border-error fcr-border;
}

.toast-warning {
  @apply fcr-bg-warning fcr-border-warning fcr-border;
}

.toast .toast-progress {
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #ccc;
  bottom: 0;
  left: 0;
}
.toast .toast-current {
  height: 3px;
  background-color: red;
}
